<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机票改签/退订</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/ticketRefundOrCancellation.css">
    <script>
        function toggleTables() {
            const changeRadio = document.querySelector('input[value="Change"]');
            const flightTable = document.getElementById('flightTable');
            const orderTable = document.getElementById('orderTable');

            if (changeRadio.checked) {
                flightTable.style.display = 'block';
                orderTable.style.display = 'block';
            } else {
                flightTable.style.display = 'none';
                orderTable.style.display = 'block';
            }
        }

        function selectRow(row) {
            const rows = row.parentNode.children;
            for (let i = 0; i < rows.length; i++) {
                rows[i].style.backgroundColor = '';
            }
            row.style.backgroundColor = '#e2e8f0';
            const tableId = row.closest('table').id;
            if (tableId === 'flightTable') {
                document.getElementById('selectedFlightData').value = JSON.stringify(Array.from(row.cells).map(cell => cell.textContent));
            } else if (tableId === 'orderTable') {
                document.getElementById('selectedOrderData').value = JSON.stringify(Array.from(row.cells).map(cell => cell.textContent));
            }
        }
    </script>
</head>
<body>
<%@ include file="userNavbar.jsp" %>

<div class="refund-container">
    <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">机票改签或退订</h2>
    <form action="ChangeOrRefundServlet" method="post">
        <div class="mb-6">
            <label class="block text-gray-700 font-semibold mb-2">订单号</label>

            <label class="block text-gray-700 font-semibold mb-2">
                改签<input type="radio" name="TicketOP" value="Change" checked onchange="toggleTables()">
                退订<input type="radio" name="TicketOP" value="Refund" onchange="toggleTables()">
            </label>

        </div>
        <div class="flex gap-4 table-container">
            <div id="orderTable" class="w-1/2">
                <h3 class="text-xl font-bold text-gray-800 mb-3">订单表</h3>
                <!-- 订单表数据将通过 AJAX 动态加载 -->
                <table class="min-w-full divide-y divide-gray-200" id="orderTable">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户 ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">舱位 ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订票时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支付金额</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单状态</th>
                        </tr>
                    </thead>
                    <tbody id="orderTableBody" class="bg-white divide-y divide-gray-200">
                        <!-- 订单数据将通过 JavaScript 动态填充 -->
                    </tbody>
                </table>
            </div>
            <div id="flightTable" class="w-1/2" style="display: block;">
                <h3 class="text-xl font-bold text-gray-800 mb-3">航班表</h3>
                <!-- 航班表数据将通过 AJAX 动态加载 -->
                <table class="min-w-full divide-y divide-gray-200" id="flightTable">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">航班 ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">舱位</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">剩余票数</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起飞站</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到达站</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登机时间</th>
                        </tr>
                    </thead>
                    <tbody id="flightTableBody" class="bg-white divide-y divide-gray-200">
                        <!-- 航班数据将通过 JavaScript 动态填充 -->
                    </tbody>
                </table>
            </div>
        </div>
        <input type="hidden" id="selectedFlightData" name="selectedFlightData">
        <input type="hidden" id="selectedOrderData" name="selectedOrderData">
        <button type="submit" class="w-full btn-submit">提交</button>
    </form>
    <% if (request.getAttribute("success") != null && (boolean) request.getAttribute("success")) { %>
    <p class="success-message">操作成功！</p>
    <% } %>
    <a href="userMain.jsp" class="block mt-4 text-center nav-btn">返回用户主界面</a>
</div>
<script>
    // 页面加载时初始化表格
    window.onload = function() {
        toggleTables();
        // 加载订单表数据
        const xhrOrder = new XMLHttpRequest();
        xhrOrder.open('GET', 'getOrders', true);
        xhrOrder.onreadystatechange = function() {
            if (xhrOrder.readyState === 4) {
                if (xhrOrder.status === 200) {
                    try {
                        const response = JSON.parse(xhrOrder.responseText);
                        const tableBody = document.getElementById('orderTableBody');
                        tableBody.innerHTML = '';

                        response.orders.forEach(order => {
                            const row = document.createElement('tr');
                            row.onclick = function() { selectRow(this); };
                            Object.values(order).forEach(value => {
                                const cell = document.createElement('td');
                                cell.textContent = value;
                                row.appendChild(cell);
                            });
                            tableBody.appendChild(row);
                        });
                    } catch (error) {
                        console.error('解析订单数据时出错:', error);
                        console.log('响应内容:', xhrOrder.responseText);
                    }
                } else {
                    console.error('获取订单数据失败，状态码:', xhrOrder.status);
                    console.log('响应内容:', xhrOrder.responseText);
                }
            }
        };
        xhrOrder.send();

        // 加载航班表数据
        const xhrFlight = new XMLHttpRequest();
        xhrFlight.open('GET', 'getFlights?page=1', true);
        xhrFlight.onreadystatechange = function() {
            if (xhrFlight.readyState === 4 && xhrFlight.status === 200) {
                const response = JSON.parse(xhrFlight.responseText);
                const tableBody = document.getElementById('flightTableBody');
                tableBody.innerHTML = '';

                response.flights.forEach(flight => {
                    const row = document.createElement('tr');
                    row.onclick = function() { selectRow(this); };
                    Object.values(flight).forEach(value => {
                        const cell = document.createElement('td');
                        cell.textContent = value;
                        row.appendChild(cell);
                    });
                    tableBody.appendChild(row);
                });
            }
        };
        xhrFlight.send();
    };
</script>
</body>
</html>